<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import FormOutlined from "@ant-design/icons-vue/FormOutlined";
import {message} from "ant-design-vue";
import {Dayjs} from "dayjs";
import BatchSelection from "~/contentScripts/views/wxt/components/BatchSelection.vue";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import RefreshButton from "~/contentScripts/views/wxt/components/RefreshButton.vue";
import {WxtBizCode, WxtPageFields, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import AddCrowds from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/addCrowds.vue";
import DeleteCrowd
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/CrowdOptimizationContent/DeleteCrowd.vue";
import ModifyCrowdPremium
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/CrowdOptimizationContent/ModifyCrowdPremium.vue";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";
import {digitFormat} from "~/utils/util";

const title = '人群优化';

const props = defineProps({
  type: {
    type: String,
    default: 'plan',
  },
  campaignIds: {
    type: Array,
    default: () => []
  },
  rows: {
    type: Array,
    default: () => []
  },
  adgroupIds: {
    type: Array,
    default: () => [],
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const emit = defineEmits([
  "refresh",
]);

const areaCode = ref<{
  id: number,
  name: string,
  provinceId: number,
  provinceName: number,
}[]>([]);
// const getAreaCodeConfig = () => {
//   WxtUtils.getAreaCodeConfig(props.bizCode).then((res: any) => {
//     // console.log('res', res);
//     areaCode.value = res;
//   });
// }
// getAreaCodeConfig();
const units = ref<any[]>([])
const effectEqual = ref<number>(15);
const dateRange = ref<Dayjs[]>([]);
const loading = ref<boolean>(false);
const unifyType = ref<string>('zhai')
watch(() => unifyType.value, (value) => {
  loadPlans();
})
watch(() => effectEqual.value, (value) => {
  loadPlans();
})
watch(() => dateRange.value, (value) => {
  loadPlans();
}, {
  deep: true
})
const emptyNumber = ref(0);
const loadPlans = () => {
  emptyNumber.value = 0;
  if (dateRange.value.length !== 2) {
    return;
  }
  if (loading.value) {
    return;
  }
  loading.value = true;
  units.value = [];
  let campaignIds = Array.from(new Set(props.campaignIds.map((campaignId: any) => campaignId)));
  // 从props.rows中获取campaignId并取唯一值
  if (campaignIds.length === 0) {
    campaignIds = Array.from(new Set(props.rows.map((item: any) => item.campaignId)));
  }
  // 从props.rows中获取adgroupId并取唯一值
  let adgroupIds = Array.from(new Set(props.adgroupIds.map((adgroupId: any) => adgroupId)));
  if (adgroupIds.length === 0) {
    adgroupIds = Array.from(new Set(props.rows.map((item: any) => item.adgroupId)));
  }
  adgroupIds.forEach((adgroupId: any, index: number) => {
    WxtUtils.customRequest('https://one.alimama.com/adgroup/get.json', props.bizCode, {
      adgroupId: adgroupId,
    }).then(res => {
      units.value.push(res.data.data.adgroup);
      if (units.value.length === adgroupIds.length) {
        // console.log(units.value);
        nextTick(() => {
          units.value.forEach((unit: any) => {
            WxtUtils.customRequest('https://one.alimama.com/crowd/horizontal/findPage.json', props.bizCode, {
              adgroupIdList: [unit.adgroupId],
              campaignIdList: [unit.campaignId],
              rptQuery: {
                conditionList: {
                  adzonePkgIdList: adZonePkgIdList.value,
                  startTime: dateRange.value[0].format('YYYY-MM-DD'),
                  endTime: dateRange.value[1].format('YYYY-MM-DD'),
                },
                fields: 'adPv,click,charge,ctr,ecpc,ecpm,gmvInshopNum,gmvInshopAmt,prepayInshopAmt,prepayInshopNum,prepayDirAmt,prepayDirNum,prepayIndirAmt,prepayIndirNum,alipayDirAmt,alipayIndirAmt,alipayInshopAmt,alipayInshopNum,alipayDirNum,alipayIndirNum,cvr,roi,dirRoi,alipayInshopCost,cartInshopNum,cartDirNum,cartIndirNum,cartRate,itemColInshopNum,shopColDirNum,shopColInshopCost,colCartNum,colCartCost,itemColCart,itemColCartCost,colNum,itemColInshopCost,itemColInshopRate,cartCost,itemColDirNum,itemColIndirNum,couponShopNum,shoppingNum,shoppingAmt,wwNum,wwNumCost',
              },
            }).then(res => {
              if (res.data.data.list.length === 0) {
                emptyNumber.value++;
                // units.value[index].crowds = [];
                calcDataSource();
                return;
              }
              // 根据adgroupId查找units中的index 并且设置到crows字段中
              const index = units.value.findIndex((u: any) => u.adgroupId === res.data.data.list[0].adgroupId);
              units.value[index].crowds = res.data.data.list;
              calcDataSource();
            })
          })
        })
      }
    })
  })
}
const dataSource = ref<any[]>([]);
const calcDataSource = () => {
  dataSource.value = [];
  units.value.forEach((unit: any, index: number) => {
    if (!unit.crowds) {
      unit.crowds = [];
    }
    unit.crowds.forEach((crowd: any) => {
      if (crowd.reportInfoList) {
        // 间接ROI
        crowd.reportInfoList[0].indirRoi = crowd.reportInfoList[0].roi - crowd.reportInfoList[0].dirRoi;
        // 直接转化率
        crowd.reportInfoList[0].dirCvr = crowd.reportInfoList[0].alipayDirNum / crowd.reportInfoList[0].click;
        // 间接转化率
        crowd.reportInfoList[0].indirCvr = crowd.reportInfoList[0].alipayIndirNum / crowd.reportInfoList[0].click;

        // 直接加购率
        crowd.reportInfoList[0].dirAddRate = crowd.reportInfoList[0].cartDirNum / crowd.reportInfoList[0].click;
        // 间接加购率
        crowd.reportInfoList[0].indirAddRate = crowd.reportInfoList[0].cartIndirNum / crowd.reportInfoList[0].click;

        // 直接收藏率
        crowd.reportInfoList[0].dirFavRate = crowd.reportInfoList[0].itemColDirNum / crowd.reportInfoList[0].click;
        // 间接收藏率
        crowd.reportInfoList[0].indirFavRate = crowd.reportInfoList[0].itemColIndirNum / crowd.reportInfoList[0].click;
        //  直接收藏加购率
        crowd.reportInfoList[0].dirFavAddRate = crowd.reportInfoList[0].dirFavRate + crowd.reportInfoList[0].dirAddRate;
        // 间接收藏加购率
        crowd.reportInfoList[0].indirFavRate = crowd.reportInfoList[0].indirFavRate + crowd.reportInfoList[0].indirAddRate;
        // 从areaCode中找到对应的省份
        // plan.launchAreaStrList = plan.launchAreaStrList.map((id: string) => id === '575' ? '574' : id);
      }
      dataSource.value.push({
        campaignId: unit.campaignId,
        campaignName: unit.campaignName,
        adgroupId: unit.adgroupId,
        adgroupName: unit.adgroupName,
        ...crowd,
        status: crowd.onlineStatus == 1,
        launchAreaStrList: unit.launchAreaStrList,
        id: unit.adgroupId + '-' + crowd.crowdId,
        adgroup: unit,
      });
    });
  })
  console.log('dataSource', dataSource.value)
  loading.value = false;
}
// const handle = () => {
//   if (props.rows.length === 0) {
//     message.error('请选择需要批量处理的数据！');
//     return;
//   }
//   loadPlans();
//   visible.value = true;
// }

onMounted(() => {
  console.log('???');
  loadPlans();
})
watch(() => props.rows, (value) => {
  if (value.length) {
    loadPlans();
  }
})
watch(() => props.campaignIds, (value) => {
  if (value.length) {
    loadPlans();
  }
})
watch(() => props.adgroupIds, (value) => {
  if (value.length) {
    loadPlans();
  }
})
const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    dataType: 'custom',
    slot: 'status',
    render: (text: any, record: any, index: number) => {
      return text ? '已投放' : '未投放';
    },
    fixed: 'left',
  },
  {
    title: '搜索推广',
    dataIndex: 'crowd.crowdName',
    width: 200,
    fixed: 'left',
  },
  {
    title: '人群类型',
    dataIndex: 'crowd.label.labelGroupName',
    width: 100,
    fixed: 'left',
    dataType: 'customRender',
    render: (text: any, record: any, index: number) => {
      return text || '-';
    }
  },
  {
    title: '溢价',
    dataIndex: 'price.discount',
    dataType: 'custom',
    width: 100,
    fixed: 'left',
    sorter: (a: any, b: any) => a.price.discount - b.price.discount,
    render: (text: any, record: any, index: number) => {
      return text + '%';
    },
    slot: 'discount'
  },
  {
    title: '所属单元',
    dataIndex: 'adgroupName',
    width: 240,
    fixed: 'left',
    dataType: 'custom',
    slot: 'adgroupName',
  },
  {
    title: '所属计划',
    dataIndex: 'campaignName',
    width: 160,
    fixed: 'left',
  },

  {
    title: '展现量',
    dataIndex: 'reportInfoList.adPv',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].adPv || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].adPv || 0) - (b.reportInfoList[0].adPv || 0);
    },
  },
  {
    title: '点击量',
    dataIndex: 'reportInfoList.click',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].click || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].click || 0) - (b.reportInfoList[0].click || 0);
    },
  },
  {
    title: '花费',
    dataIndex: 'reportInfoList.charge',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].charge || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].charge || 0) - (b.reportInfoList[0].charge || 0);
    },
  },
  {
    title: '点击率',
    dataIndex: 'reportInfoList.ctr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ctr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ctr || 0) - (b.reportInfoList[0].ctr || 0);
    },
  },
  {
    title: '平均点击花费',
    dataIndex: 'reportInfoList.ecpc',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpc || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpc || 0) - (b.reportInfoList[0].ecpc || 0);
    },
  },
  {
    title: '千次展现花费',
    dataIndex: 'reportInfoList.ecpm',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpm || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpm || 0) - (b.reportInfoList[0].ecpm || 0);
    },
  },
  {
    title: '拍下订单笔数',
    dataIndex: 'reportInfoList.gmvInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopNum || 0) - (b.reportInfoList[0].gmvInshopNum || 0);
    },
  },
  {
    title: '拍下订单金额',
    dataIndex: 'reportInfoList.gmvInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopAmt || 0) - (b.reportInfoList[0].gmvInshopAmt || 0);
    },
  },
  {
    title: '预售成交笔数',
    dataIndex: 'reportInfoList.prepayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopNum || 0) - (b.reportInfoList[0].prepayInshopNum || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopAmt || 0) - (b.reportInfoList[0].prepayInshopAmt || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayDirAmt || 0) - (b.reportInfoList[0].prepayDirAmt || 0);
    },
  },
  {
    title: '预售间接成交笔数',
    dataIndex: 'reportInfoList.prepayIndirNum',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirNum || 0) - (b.reportInfoList[0].prepayIndirNum || 0);
    },
  },
  {
    title: '预售间接成交金额',
    dataIndex: 'reportInfoList.prepayDirAmt',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirAmt || 0) - (b.reportInfoList[0].prepayIndirAmt || 0);
    },
  },
  {
    title: '总成交笔数',
    dataIndex: 'reportInfoList.alipayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopNum || 0) - (b.reportInfoList[0].alipayInshopNum || 0);
    },
  },
  {
    title: '总成交金额',
    dataIndex: 'reportInfoList.alipayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopAmt || 0) - (b.reportInfoList[0].alipayInshopAmt || 0);
    },
  },
  {
    title: '直接成交笔数',
    dataIndex: 'reportInfoList.alipayDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirNum || 0) - (b.reportInfoList[0].alipayDirNum || 0);
    },
  },
  {
    title: '直接成交金额',
    dataIndex: 'reportInfoList.alipayDirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirAmt || 0) - (b.reportInfoList[0].alipayDirAmt || 0);
    },
  },
  {
    title: '间接成交笔数',
    dataIndex: 'reportInfoList.alipayIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirNum || 0) - (b.reportInfoList[0].alipayIndirNum || 0);
    },
  },
  {
    title: '间接成交金额',
    dataIndex: 'reportInfoList.alipayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirAmt || 0) - (b.reportInfoList[0].alipayIndirAmt || 0);
    },
  },
  {
    title: '点击转化率',
    dataIndex: 'reportInfoList.cvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cvr || 0) - (b.reportInfoList[0].cvr || 0);
    },
  },
  {
    title: '投入产出比',
    dataIndex: 'reportInfoList.roi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].roi || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].roi || 0) - (b.reportInfoList[0].roi || 0);
    },
  },
  {
    title: '直接成交RIO',
    dataIndex: 'reportInfoList.dirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirRoi || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirRoi || 0) - (b.reportInfoList[0].dirRoi || 0);
    },
  },
  {
    title: '总成交成本',
    dataIndex: 'reportInfoList.alipayInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopCost || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopCost || 0) - (b.reportInfoList[0].alipayInshopCost || 0);
    },
  },
  {
    title: '总购物车数',
    dataIndex: 'reportInfoList.cartInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartInshopNum || 0) - (b.reportInfoList[0].cartInshopNum || 0);
    },
  },
  {
    title: '直接购物车数',
    dataIndex: 'reportInfoList.cartDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartDirNum || 0) - (b.reportInfoList[0].cartDirNum || 0);
    },
  },
  {
    title: '间接购物车数',
    dataIndex: 'reportInfoList.cartIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartIndirNum || 0) - (b.reportInfoList[0].cartIndirNum || 0);
    },
  },
  {
    title: '加购率',
    dataIndex: 'reportInfoList.cartRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartRate || 0) - (b.reportInfoList[0].cartRate || 0);
    },
  },
  {
    title: '收藏宝贝数',
    dataIndex: 'reportInfoList.itemColInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopNum || 0) - (b.reportInfoList[0].itemColInshopNum || 0);
    },
  },
  {
    title: '收藏店铺数',
    dataIndex: 'reportInfoList.shopColDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColDirNum || 0) - (b.reportInfoList[0].shopColDirNum || 0);
    },
  },
  {
    title: '店铺收藏成本',
    dataIndex: 'reportInfoList.shopColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColInshopCost || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColInshopCost || 0) - (b.reportInfoList[0].shopColInshopCost || 0);
    },
  },
  {
    title: '总收藏加购数',
    dataIndex: 'reportInfoList.colCartNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartNum || 0) - (b.reportInfoList[0].colCartNum || 0);
    },
  },
  {
    title: '总收藏加购成本',
    dataIndex: 'reportInfoList.colCartCost',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartCost || 0) - (b.reportInfoList[0].colCartCost || 0);
    },
  },
  {
    title: '宝贝收藏加购数',
    dataIndex: 'reportInfoList.itemColCart',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCart || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCart || 0) - (b.reportInfoList[0].itemColCart || 0);
    },
  },
  {
    title: '宝贝收藏加购成本',
    dataIndex: 'reportInfoList.itemColCartCost',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCartCost || 0) - (b.reportInfoList[0].itemColCartCost || 0);
    },
  },
  {
    title: '总收藏数',
    dataIndex: 'reportInfoList.colNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colNum || 0) - (b.reportInfoList[0].colNum || 0);
    },
  },
  {
    title: '宝贝收藏成本',
    dataIndex: 'reportInfoList.itemColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopCost || 0) - (b.reportInfoList[0].itemColInshopCost || 0);
    },
  },
  {
    title: '宝贝收藏率',
    dataIndex: 'reportInfoList.itemColInshopRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopRate || 0) - (b.reportInfoList[0].itemColInshopRate || 0);
    },
  },
  {
    title: '加购成本',
    dataIndex: 'reportInfoList.cartCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartCost || 0) - (b.reportInfoList[0].cartCost || 0);
    },
  },
  {
    title: '直接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColDirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColDirNum || 0) - (b.reportInfoList[0].itemColDirNum || 0);
    },
  },
  {
    title: '间接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColIndirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColIndirNum || 0) - (b.reportInfoList[0].itemColIndirNum || 0);
    },
  },
  {
    title: '优惠劵领取量',
    dataIndex: 'reportInfoList.couponShopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].couponShopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].couponShopNum || 0) - (b.reportInfoList[0].couponShopNum || 0);
    },
  },
  {
    title: '购物金充值笔数',
    dataIndex: 'reportInfoList.shoppingNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingNum || 0) - (b.reportInfoList[0].shoppingNum || 0);
    },
  },
  {
    title: '购物金充值金额',
    dataIndex: 'reportInfoList.shoppingAmt',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingAmt || 0) - (b.reportInfoList[0].shoppingAmt || 0);
    },
  },
  {
    title: '旺旺咨询量',
    dataIndex: 'reportInfoList.wwNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].wwNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].wwNum || 0) - (b.reportInfoList[0].wwNum || 0);
    },
  },
  {
    title: '间接成交ROI',
    dataIndex: 'reportInfoList.indirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirRoi || 0;
        return value.toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirRoi || 0) - (b.reportInfoList[0].indirRoi || 0);
    },
  },
  {
    title: '直接转化率',
    dataIndex: 'reportInfoList.dirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirCvr || 0) - (b.reportInfoList[0].dirCvr || 0);
    },
  },
  {
    title: '间接转化率',
    dataIndex: 'reportInfoList.indirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirCvr || 0) - (b.reportInfoList[0].indirCvr || 0);
    },
  },
  {
    title: '直接收藏加购率',
    dataIndex: 'reportInfoList.dirFavAddRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirFavAddRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirFavAddRate || 0) - (b.reportInfoList[0].dirFavAddRate || 0);
    },
  },
  {
    title: '间接收藏加购率',
    dataIndex: 'reportInfoList.indirFavRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirFavRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirFavRate || 0) - (b.reportInfoList[0].indirFavRate || 0);
    },
  },
];
const visible = ref<boolean>(false);
const handleSwitch = (rows: any[], status: undefined | boolean = undefined) => {
  const crowdList: any[] = [];
  rows.forEach((row: any) => {
    const statusReal = typeof status === 'undefined' ? (row.status ? 0 : 1) : (status ? 1 : 0);
    crowdList.push({
      adgroupId: row.adgroupId,
      campaignId: row.campaignId,
      crowdId: row.crowdId,
      crowd: {
        crowdId: row.crowdId,
      },
      onlineStatus: statusReal,
    })
    // 修改数据源中的状态
    const index = dataSource.value.findIndex((d: any) => d.id === row.id);
    dataSource.value[index].status = statusReal === 1;
  })
  WxtUtils.customRequest('https://one.alimama.com/crowd/horizontal/modifyStatus.json', props.bizCode, {
    crowdList: crowdList,
  }).then(res => {
    message.success('操作成功！');
  })
}
const selectedRows = ref<any[]>([]);
const BatchModifyStatus = (e: any) => {
  const status = e.key === 1;
  if (!selectedRows.value.length) {
    message.error('请选择需要批量处理的数据！');
    return;
  }
  handleSwitch(selectedRows.value, status);
}
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
const adZonePkgIdList = ref<any[]>([]);
</script>

<template>
  <a-row style="padding-bottom: 10px;">
    <a-col>
      <a-space>
        <BatchSelection :items="WxtUtils.adZonePkgIdList" name="流量来源" v-model:value="adZonePkgIdList" confirm/>
        <date-range-selection v-model:value="dateRange" :has-today="false"/>
        <RefreshButton :loading="loading" @refresh="loadPlans"/>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="BatchModifyStatus">
              <a-menu-item :key="1">
                正在推广
              </a-menu-item>
              <a-menu-item :key="0">
                暂停推广
              </a-menu-item>
            </a-menu>
          </template>
          <a-button size="small" type="primary" ghost>
            推广状态
          </a-button>
        </a-dropdown>
        <AddCrowds :rows="units" :biz-code="WxtBizCode.关键字推广" @refresh="loadPlans"/>
        <ModifyCrowdPremium :crowds="selectedRows" @refresh="loadPlans" :biz-code="bizCode"/>
        <DeleteCrowd :crowds="selectedRows" @refresh="loadPlans" :biz-code="bizCode"/>
      </a-space>
    </a-col>
  </a-row>
  <div style="height:calc(100vh - 140px);">
    <base-table
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        table-name="人群优化"
        selection
        v-model:selected-rows="selectedRows"
        row-key="id"
    >
      <template #status="row">
        <a-switch :checked="row.status" @change="handleSwitch([row])"/>
      </template>
      <template #adgroupName="row">
        <a-row type="flex" class="adgroupName" :gutter="5">
          <a-col>
            <a-popover placement="right">
              <template #content>
                <img :src="row.adgroup.material.imageUrl"
                     style="width: 200px;height: 200px;"
                />
              </template>
              <img :src="row.adgroup.material.imageUrl"
                   style="width: 60px;height: 60px;border-radius: 5px;"
              />
            </a-popover>
          </a-col>
          <a-col flex="1" class="title">
            <a-tooltip :title="row.adgroup.adgroupName">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.adgroup.adgroupName }}</span>
            </a-tooltip>
            <div>
              <a-space>
                <span style="color: #666;">ID: {{ row.adgroup.adgroupId }}</span>
                <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;"
                              @click="copy(row.adgroup.adgroupId)"
                />
              </a-space>
            </div>
          </a-col>
        </a-row>
      </template>
      <template #discount="row">
        <a-space>
          {{ row.price.discount }}%
          <ModifyCrowdPremium :crowds="[row]" @refresh="loadPlans" :biz-code="bizCode">
            <FormOutlined style="color: #1677ff;cursor: pointer;"/>
          </ModifyCrowdPremium>
        </a-space>
      </template>
    </base-table>
  </div>
</template>

<style scoped>

</style>
